<template>
	<view>
		<nav-bar></nav-bar>
		<view class="picture" style="position:relative;height: 198px;">
			<!-- <image :src="park.pictureurl" style="width: 100%;height:198px;"></image> -->
			<div style="">
				<iframe
					v-if="park.ifvr == 'Y' && bannerIndex == 0"
					:src="park.vrurl"
					frameborder="no"
					class="w-full"
					height="200px"
					width="100%"
					allowfullscreen="true"
					style="background-color:#000"
				></iframe>
				<img v-if="park.iftp == 'Y' && bannerIndex == 1" class="w-full" style="height:200px; width:100%" :src="park.pictureurl" />
				<video v-if="park.ifsp == 'Y' && bannerIndex == 2" class="w-full" :src="park.yuanqushipinurl" style="height:200px;  width:100%" controls></video>
				<view class="" v-if="park.ifdt == 'Y' && bannerIndex == 3">
					<baidu-map class="bannermap" :center="{ lng: park.jingdu, lat: park.weidu }" :zoom="mapZoom" :scroll-wheel-zoom="true">
						<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
						<bm-marker
							:position="{ lng: park.jingdu, lat: park.weidu }"
							:icon="{
								url: 'http://1stzone.cn/admin/profile/upload/2022/11/17/4f1a4f3d-e947-4b7f-b62b-7aadf358c81a.png',
								size: { width: 20, height: 20 }
							}"
						>
							<bm-label :content="yuanquMapContent" :labelstyle="{ color: 'red', fontsize: '10px' }" :offset="{ width: 12, height: -80 }"></bm-label>
						</bm-marker>
					</baidu-map>
				</view>
			</div>
			<view
				class="flex flex-row justify-evenly items-center"
				style="color:#FFFFFF;font-size:18px;position: absolute;left:0;right:0;bottom:0;height: 31px;background: rgba(0, 0, 0, 0.3);"
			>
				<view class="w-title" v-if="park.ifvr == 'Y'" @click="changeBannerIndex(0)">
					<view class="flex flex-row justify-center items-center text">
						<image src="../../static/camera.png" style="width:13px;height:11px;"></image>
						<view style="margin-left:8px;font-size: 11px;">全景</view>
					</view>
					<i class="el-icon-caret-top icon"></i>
				</view>
				<view class="w-title" v-if="park.iftp == 'Y'" @click="changeBannerIndex(1)">
					<view class="flex flex-row justify-center items-center text">
						<image src="../../static/picture.png" style="width:13px;height:11px;"></image>
						<view style="margin-left:8px;font-size: 11px;">图片</view>
					</view>
					<i class="el-icon-caret-top icon"></i>
				</view>
				<view class="w-title" v-if="park.ifsp == 'Y'" @click="changeBannerIndex(2)">
					<view class="flex flex-row justify-center items-center text">
						<image src="../../static/vedio.png" style="width:13px;height:11px;"></image>
						<view style="margin-left:8px;font-size: 11px;">视频</view>
					</view>
					<i class="el-icon-caret-top icon"></i>
				</view>
				<view class="w-title" v-if="park.ifdt == 'Y'" @click="changeBannerIndex(3)">
					<view class="flex flex-row justify-center items-center text">
						<image src="../../static/map.png" style="width:13px;height:11px;"></image>
						<view style="margin-left:8px;font-size: 11px;">地图</view>
					</view>
					<i class="el-icon-caret-top icon"></i>
				</view>
			</view>
			<view
				v-if="park.ifvr == 'Y' && bannerIndex == 0"
				style="position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 81px;height: 81px;display: flex;flex-direction: column;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);"
			>
				<view style="color: white;font-size: 32px;">VR</view>
			</view>
		</view>
		<view style="padding:21px;">
			<view class="flex flex-row">
				<view class="flex-1">
					<view style="font-size: 18px;font-weight: 400;color: #000000;">{{ park.yuanquname }}</view>
					<view style="margin-top:8px;font-size: 10px;font-weight: 400;color: #000000;">{{ park.address }}</view>
				</view>
				<view style="width:75px;height:47px;"><image style="width:75px;height:47px;" :src="park.logourl"></image></view>
			</view>
			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">国家级别：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.guojiajibie }}</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">成立年份：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.chenglinianfen }}</view>
				</view>
			</view>

			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">所属省市：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.provincename }}{{ park.cityname }}</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">规划面积：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.guihuamianji }}平方米</view>
				</view>
			</view>

			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">办公房租：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.bangongfangzu }}元/㎡/天</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">工业地价：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.gongyedijia }}万/亩起</view>
				</view>
			</view>

			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">园区类型：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.yuanquleixing }}</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">土地均价：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.tudijunjia }}万元/亩</view>
				</view>
			</view>
			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">土地存量：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.tudicunliang }}亩</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">建筑面积：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.jianchengmianji }}平方米</view>
				</view>
			</view>

			<view class="flex flex-row" style="margin-top: 16px;">
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">税收要求：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.shuishouyaoqiu }}万元/亩</view>
				</view>
				<view class="flex-1 flex flex-row">
					<view class="list-title-1-1">园区年GDP：</view>
					<view class="flex-1" style="font-size: 10px;font-weight: 400;color: #0B0B0B;">{{ park.parkniangdp }}亿元</view>
				</view>
			</view>

			<view style="font-size: 10px;margin-top:20px;height:232px;overflow-y: scroll;" v-html="park.details"></view>
		</view>

		<view class="list-title-1">基本信息:</view>
		<view style="margin-top:32px;padding:0 21px;">
			<view style="padding:17px 0px;border-bottom:solid 1px #EEEEEE;" class="flex flex-row">
				<view style="font-size: 14px;font-weight: 400;color: #9DA1AA;width:81px;max-width: 150px;">产业画像：</view>

				<view class="items flex flex-row" style="flex-flow: wrap;width: 81%;">
					<view v-for="(item, index) in park.hangyeleixingArr" :key="index" style="margin-left:13px;font-size: 13px;font-weight: 400;color: #000000;">{{ item }}</view>
				</view>
			</view>
		</view>

		<view class="itemlist flex flex-row" style="margin-top:13px;">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">电压：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.dianya }}v</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">居民用电：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.juminyongdian }}元/度</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">商业用电：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.shangyeyongdian }}元/度</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">工业用电：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.gongyeyongdian }}元/度</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">生活用水：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.shenghuoyongshui }}元/吨</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">中性水：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.zhongxingshui }}元/吨</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">水蒸气：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.shuizhengqi }}元/吨</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">污水处理：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.wushuichuli }}元/吨</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">天然气：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.tianranqi }}元/立方</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">暖气：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.nuanqi }}元/月</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">最低工资：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.zuidigongzi }}元/月</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">普工：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.pugong }}元/月</view>
			</view>
		</view>
		<view class="itemlist flex flex-row">
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">中级管理：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.zhongjiguanli }}元/月</view>
			</view>
			<view class="flex-1 flex flex-row">
				<view class="list-title-1-1">高层管理：</view>
				<view style="font-size: 14px;font-weight: 400;color: #000000;">{{ park.gaocengguanli }}元/月</view>
			</view>
		</view>

		<view style="margin-top:32px;padding:0 21px;">
			<view style="padding:17px 0px;border-bottom:solid 1px #EEEEEE;" class="flex flex-row">
				<view style="font-size: 14px;font-weight: 400;color: #9DA1AA;">入驻企业：</view>
				<view class="items flex flex-row">
					<view class="">
						<view v-for="(item, index) in park.ruzhuqiyeArr" :key="index" style="margin-bottom: 10px;">{{ item }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-title-1">资料下载:</view>

		<view style="margin-top:10px;padding:0 21px;font-size: 10px;font-weight: 400;color: #9DA1AA;"><view @click="download(park.parkfileurl)">下载</view></view>

		<view class="list-title-1">门槛限制:</view>
		<view style="padding:0px 21px;"><view style="font-size: 10px;margin-top:20px;height:116px;overflow-y: scroll;" v-html="park.content"></view></view>
		<!-- <view style="padding:21px;"><view style="padding:14px;height: 202px;background: #FFFAF7;" v-html="park.content"></view></view> -->

		<view class="list-title-1">交通配套:</view>

		<view style="padding:0 21px;">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
			<div class="jiaotongditu" style="margin-bottom:0px;">
				<baidu-map class="map" :center="{ lng: park.jingdu, lat: park.weidu }" :zoom="mapZoom" :scroll-wheel-zoom="true">
					<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
					<bm-circle
						:center="circlePath.center"
						:radius="circlePath.radius"
						stroke-color="blue"
						:stroke-opacity="0.5"
						:stroke-weight="2"
						@lineupdate="updateCirclePath"
						:editing="true"
					></bm-circle>
					<bm-marker :position="{ lng: park.jingdu, lat: park.weidu }">
						<div class="optionback">
							<bm-label :content="yuanquMapContent" :labelstyle="{ color: 'red', fontsize: '10px' }" :offset="{ width: 12, height: -80 }"></bm-label>
						</div>
					</bm-marker>

					<bm-marker
						v-for="(point, index) in localPointList"
						:key="index"
						@click="infoWindowOpen(point)"
						:position="{ lng: point.location.lng, lat: point.location.lat }"
					>
						<bm-label
							:content="labelconarry[index]"
							:label-style="{ background: 'rgb(237,45,45)', border: 0, color: 'white', zIndex: 100, fontSize: '12px' }"
							:offset="{ width: 4, height: 4 }"
						></bm-label>
						<bm-info-window :show="point.detail != 1" @close="infoWindowClose(point)" @open="infoWindowOpen(point)">
							{{ point.name }}（{{ point.address }}）
						</bm-info-window>
					</bm-marker>
					<div v-if="shwordl">
						<bm-driving
							:start="{ lng: newlng, lat: newlat }"
							:end="{ lng: park.jingdu, lat: park.weidu }"
							:auto-viewport="true"
							:waypoints="[{ lng: newlng, lat: newlat }, { lng: park.jingdu, lat: park.weidu }]"
						></bm-driving>
					</div>
				</baidu-map>
			</div>
			<div class="maplable">
				<div class="maplableitem" v-for="(item, index) in localPointList" :key="index">
					<p class="locback">{{ labelconarry[index] }}</p>
					<div>
						<div style="display: flex;">
							<img style="width: 35px; height: 20px;" src="../../static/road.png" alt="" v-if="mapSwitch == '收费站'" />
							<img style="width: 35px; height: 20px;" src="../../static/plane.png" alt="" v-if="mapSwitch == '机场'" />
							<img style="width: 35px; height: 20px;" src="../../static/train.png" alt="" v-if="mapSwitch == '火车站'" />
							<img style="width: 35px; height: 20px;" src="../../static/around.png" alt="" v-if="mapSwitch == '周边配套'" />
							<p style="color:  rgb(61,122,211);" class="chaochu">{{ item.name }}</p>
						</div>
						<div style="color: rgb(198,199,204);  width: 100px;">{{ item.address }}</div>
					</div>
					<div style="display: flex; width: 100px;">
						<img style="width: 25px; height: 15px;" @click="showrond(item.location.lat, item.location.lng, index)" src="../../static/po.png" alt="" />
						<span
							style="width: 55px; 
											"
						>
							{{ parseInt(space(park.weidu, park.jingdu, item.location.lat, item.location.lng)) }}公里
						</span>
						<div v-if="shwordl"><img v-if="index == thindex" src="../../static/close.png" style="width: 20px;" @click="shwordl = false" alt="" /></div>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//设置默认的分享参数
			share: {
				title: 'yuanquname',
				imageUrl: 'logourl',
				desc: 'details'
			},
			//设置默认的分享参数

			circlePath: {
				center: {
					lng: 116.404,
					lat: 39.915
				},
				radius: 10000
			},
			mapZoom: 10,
			bannerIndex: 0,

			thindex: null,
			newlng: null,
			newlat: null,
			shwordl: false,
			mapSwitch: '收费站', // plane train around
			id: 0,
			park: {},
			tabList: [
				{
					name: '收费站'
				},
				{
					name: '机场'
				},
				{
					name: '火车站'
				},
				{
					name: '周边配套'
				}
			],
			localPointList: []
		};
	},

	onLoad(option) {
		this.id = option.id;
		this.getParkDetail(option.id);
	},
	computed: {
		yuanquMapContent() {
			return (
				'<div style="padding:10px;"><span style="color:#FE7743;font-size:16px;font-weight:bold;">' +
				this.park.yuanquname +
				'</span><br />地址：' +
				this.park.address +
				'<br />'
			); // +
			// this.yuanqu.jingdu + ',' + this.yuanqu.weidu + '</div>'
		},
		labelconarry() {
			return ['A', 'B', 'C', 'D', 'E', 'F', 'J', 'H', 'I', 'J'];
		}
	},
	methods: {
		infoWindowOpen(point) {
			point.detail = 0;
		},
		infoWindowClose(point) {
			point.detail = 1;
		},
		updateCirclePath(e) {
			this.circlePath.center = e.target.getCenter();
			this.circlePath.radius = e.target.getRadius();
		},
		showrond(lat, lng, index) {
			this.shwordl = true;
			this.newlng = lng;
			this.newlat = lat;
			this.thindex = index;

			console.log(this.yuanqu.jingdu, this.yuanqu.weidu);
		},
		// 根据经纬度实现距离
		space(lat1, lng1, lat2, lng2) {
			console.log(lat1, lng1, lat2, lng2);
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;
			return s; // 单位千米
		},
		getMapLocalSearch() {
			let that = this;
			this.$apiCall.request(
				'get',
				'/map/search',
				{
					query: that.mapSwitch,
					region: that.park.cityname,
					center: `${that.park.weidu},${that.park.jingdu}`
				},
				{
					sucCb(data) {
						that.localPointList = data.data.results;
						console.log(data);
					}
				}
			);
		},
		changeBannerIndex(i) {
			this.bannerIndex = i;
			console.log(this.park.ifdt);
		},

		getParkDetail() {
			let that = this;
			this.$apiCall.request(
				'get',
				`/yuanqu/${this.id}`,
				{},
				{
					sucCb(data) {
						that.park = data.data;
						console.log(that.park.jingdu, that.park.weidu);
						that.circlePath.center.lng = that.park.jingdu;
						that.circlePath.center.lat = that.park.weidu;
						that.getMapLocalSearch();
						if (that.park.ifvr !== 'Y') {
							that.changeBannerIndex(1);
						}
						let str = that.park.yuanquname ? '' + that.park.yuanquname : '';
						str = str + '·' + '第1园区';
						uni.setNavigationBarTitle({
							title: str
						});
					}
				}
			);
		},
		tabClick(e) {
			this.mapSwitch = e.name;
			if (this.mapSwitch == '周边配套') {
				this.mapSwitch = '银行，医院，超市，酒店，景区';
			}
			console.log(this.mapSwitch);
			this.getMapLocalSearch();
		}
	}
};
</script>

<style>
.itemlist {
	padding: 0 21px;
	margin-bottom: 17px;
}

.map {
	width: 562px;
	height: 300px;
}

.bannermap {
	width: 100%;
	height: 200px;
}

.jiaotongditu {
	width: 56.3125rem;
	height: 20.1875rem;
	margin-top: 1.25rem;
}

.maplable {
	padding: 10px;
	// border: 1px solid red;
	position: relative;
	top: -310px;
	width: 240px;
	height: 240px;
	left: 4px;
	overflow: auto;
	background-color: white;
	font-size: 12px;
}

.mapoptions {
	padding: 10px;
	// border: 1px solid red;
	position: relative;
	top: -310px;
	width: 240px;
	height: 240px;
	left: 20px;
	background-color: white;
	font-size: 12px;
}

.maplable .maplableitem {
	display: flex;
	justify-content: space-between;
}
.maplable .maplableitem .locback {
	// border: 1px solid red;
	width: 28px;
	height: 34px;
	background-image: url('http://www.gigacre.com/static/home/pc/images/lo.svg');
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	line-height: 16px;
	color: white;
	text-align: center;
}
::-webkit-scrollbar {
	width: 6px;
	background-color: rgb(178, 178, 178);
}

.optioncenter {
	height: 200px;
	overflow: auto;
	margin-top: 36px;
}

.optioncenter .centeritem {
	padding: 5px;
	display: flex;
	align-items: center;
	border-top: 1px solid rgb(221, 221, 221);
}

.maplable .maplableitem .chaochu {
	width: 100px;
	overflow: hidden;
	/* 第二步：让文本不会换行， 在同一行继续 */
	white-space: nowrap;
	/* 第三步：用省略号来代表未显示完的文本 */
	text-overflow: ellipsis;
}

.options {
	position: relative;
	top: -570px;
	transform: translateZ(0);
}

.optiontop {
	position: fixed;
	top: 10px;
	height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	width: 221px;
	// border-bottom: 1px solid rgb(221,221,221);
}
.list-title-1 {
	padding: 0 21px;
	margin-top: 20px;
	font-size: 16px;
	font-weight: 700;
	color: #5e6069;
}
.list-title-1-1 {
	font-size: 15px;
	font-weight: 400;
	color: #9da1aa;
}
</style>
